<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="附件上传"
    width="800"
    show-footer
    show-zoom
    resize
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <div class="flex justify-between uploadBox">
      <VUpload
        :limit="999"
        :validator="validator"
        :progress="true"
        type="file"
        drag
        :multiple="true"
        @success="success"
      >
        <el-button type="primary" link class="text-center">
          <svg-icon class="text-sm mr-2" icon-class="Plus"></svg-icon>
          上传文件
        </el-button>
      </VUpload>
    </div>
    <div class="w-full py-6">
      <vxe-table
        border
        show-overflow
        :data="fileList"
        :column-config="{ resizable: true }"
        :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
      >
        <vxe-column type="seq" title="序号" width="60"></vxe-column>
        <vxe-column field="filename" title="文件名称">
          <template #edit="{ row }">
            {{ row.filename }}
          </template>
        </vxe-column>
        <vxe-column field="certificate_type" title="证书类型" v-if="certificate == 2">
          <template #default="{ row }">
            <el-select class="w-full" v-model="row.certificate_type" filterable>
              <el-option
                v-for="item in options['goods.GoodsSpu']?.[0].authenticationText"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </template>
        </vxe-column>
        <vxe-column field="operation" title="操作">
          <template #default="{ row }">
            <el-button type="danger" @click="deleteRow(row, index)">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="submitUpload()"
        >上 传</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { ref, computed, toRefs } from "vue";
import VUpload from "@/components/VUpload/index.vue";
const emit = defineEmits(["uploadFile"]);
let options = reactive(inject("options"));

const visible = ref(false);
const loading = ref(false);

const certificate = ref(null);
const fileList = ref([]);

const load = ref(false);
const open = async (type) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  fileList.value = [];
  certificate.value = type;
  visible.value = true;
};
const success = (obj) => {
  fileList.value.push({
    filename: obj.filename,
    filepath: obj["data-show-file"],
    certificate_type: filterCertificate(obj.filename) || 0,
    certificate_class: certificate.value,
  });
};

const filterCertificate = (filename) => {
  options.value["goods.GoodsSpu"]?.[0].authenticationText.map((j) => {
    if (filename.substring(0, 3) == j.label.substring(0, 3)) {
      return j.value;
    } else {
      return 0;
    }
  });
};

// 上传校验
const validator = (fileInfo) => {
  return (() => {})();
};
// 文件上传
const submitUpload = () => {
  emit("uploadFile", fileList.value, certificate.value);
  close();
};

const close = () => {
  visible.value = false;
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.uploadBox {
  border-radius: 4px;
  border: 1px dashed #3366f1;
  justify-content: center;
  align-items: center;

  .v-upload {
    width: 100%;
    height: 100%;

    :deep(.el-upload) {
      width: 100%;
    }
    :deep(.el-upload-dragger) {
      padding: 12px;
    }
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.upload-file-uploader {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

:deep(.el-upload-list) {
  width: 100%;
  display: flex;
  flex-direction: column;

  .el-upload-list__item {
    width: 100%;
    padding: 3px 50px;
  }
}
</style>
